@charset "utf-8";

@import-once "mixins";

/**************** FONTS ***************/
@font-face {
    font-family: 'BrandonGrotesqueBold';
    src: url('../webfonts/BrandonGrotesqueBold/brandon_bld.eot');
    src: url('../webfonts/BrandonGrotesqueBold/brandon_bld.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/BrandonGrotesqueBold/brandon_bld.woff') format('woff'),
         url('../webfonts/BrandonGrotesqueBold/brandon_bld.ttf') format('truetype'),
         url('../webfonts/BrandonGrotesqueBold/brandon_bld.svg#BrandonGrotesque-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/**************** CONTROL PANEL ICONS ***************/
i[class*="panel-icon"]{
    background-image: url(../img/sprite-icons.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-color: transparent;
    display: inline-block;
    line-height: 16px;
    width: 16px;
    height: 16px;
    vertical-align: text-top;
}
i.panel-icon-monitor{background-position: 0 0;}
i.panel-icon-user{background-position: -16px 0px;}
i.panel-icon-key{background-position: -32px 0px;}
i.panel-icon-lock{background-position: -48px 0px;}

/**** icons for dropdown menu ****/
i.panel-icon-home{background-position: 0px -16px;}
i.panel-icon-chart-bar{background-position: -16px -16px;}
i.panel-icon-chart-line{background-position: -32px -16px;}
i.panel-icon-chart-pie{background-position: -48px -16px;}
i.panel-icon-table{background-position: -64px -16px;}
i.panel-icon-static-table{background-position: -144px -16px;}
i.panel-icon-image{background-position: -80px -16px;}
i.panel-icon-social-users{background-position: -96px -16px;}
i.panel-icon-pages{background-position: -112px -16px;}
i.panel-icon-bell{background-position: -128px -16px;}
i.panel-icon-ui-windows{background-position: -160px -16px;}

i.panel-icon-search{background-position: 0px -32px;}
i.panel-icon-cog{background-position: -16px -32px;}
i.panel-icon-status-online{background-position: -32px -32px;}
i.panel-icon-pencil{background-position: -48px -32px;}
i.panel-icon-cross{background-position: -144px -32px;}
i.panel-icon-twitter{background-position: -64px -32px;}
i.panel-icon-facebook{background-position: -80px -32px;}
i.panel-icon-gplus{background-position: -96px -32px;}
i.panel-icon-page{background-position: -112px -32px;}
i.panel-icon-calendar{background-position: -128px -32px;}

i.panel-icon-close{background-position: -144px -32px;}

i[class$="32"]{width: 32px; height: 32px;}

i.panel-icon-chart-bar-32{background-position: 0px -48px;}
i.panel-icon-group-users-32{background-position: -32px -48px;}
i.panel-icon-cart-32{background-position: -64px -48px;}
i.panel-icon-dollar-32{background-position: -96px -48px;}
i.panel-icon-calendar-32{background-position: -128px -48px;}

/*** icons for alert messages ***/
i.panel-icon-alert-note {background-position: 0px -80px;}
i.panel-icon-alert-error {background-position: -16px -80px;}
i.panel-icon-alert-accept {background-position: -32px -80px;}
i.panel-icon-alert-cancel {background-position: -48px -80px;}
i.panel-icon-alert-emoticon {background-position: -64px -80px;}

/**************** LAYOUT COMMON STYLES ***************/
@default-font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

body{background-color: #e0e1e8;}
.container-fluid{
    max-width:980px;
    margin: 0 auto;
    padding: 0px;
}

div.first-top-bar{
    padding: 16px 0px;
    #gradient > .vertical(#343434, #222222);

    h1{
        color: #878787;
        text-transform: uppercase;
        text-align: center;
        font-size: 24px;
        margin: 0px;
        font-family: 'BrandonGrotesqueBold', Helvetica, Arial, "Lucida Grande", sans-serif;
    }

    div.navbar{
        margin-bottom: 0px;

        div.navbar-inner{
            filter: none;
            border: none;
            background: none;
            .box-shadow-none();
        }

        h1{float: left;}

        ul.nav{
            margin-top: 4px;

            li{
                margin-left: 10px;
                border: 1px solid #000;
                .box-sizing-border-box();

                &:hover{
                    #gradient > .vertical(#5d5d5d, #2f2f2f);
                }

                div.number, a{
                    color: #fff;
                    border-top: 1px solid rgba(255,255,255,.3);
                    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
                    font-size: 13px;
                    .text-shadow(1px, 1px, 1px, #222);
                }

                @padding-top-bottom: 4px;
                div.number{
                    padding: @padding-top-bottom 9px;
                    border-right: 1px solid #000;
                    display: inline-block;
                    position: absolute;

                    & + a{padding-left: 35px;}
                }

                a{
                    padding: @padding-top-bottom 20px;
                    margin: 0px;
                    .border-radius(0);

                    &:hover{
                        background: none;
                        filter: none;
                    }
                }

                div.support-ticket{
                    #gradient > .vertical(#ef6421, #b03d06);
                }

                div.reminders, div.messages{
                    #gradient > .vertical(#c6131a, #840101);
                }
            }
        }
    }
}

div.second-top-bar{
    background-color: #162b50;
    border-top: 1px solid #24375a;
}

div.header-bar{
    margin: 0 auto;
    padding: 15px 0;
    color: #fff;
    padding: 0;
    border-left: 1px solid #071225;
    border-right: 1px solid #071225;
    border-top: 1px solid #d0d1d6;

    #gradient > .vertical(#5ca8e9, #2d5eb6);

    h2{
        margin: 0px;
        margin-top: 14px;
        padding: 0 0 0 20px;
        font-family: @default-font-family;
        font-size: 30px;
    }

    div.logged-user{
        position: relative;
        margin-right: -1px;

        div.btn-group{
            border-left: 1px solid transparent;
            border-right: 1px solid transparent;
            margin-top: -1px;

            div.btn, button.dropdown-toggle{
                background: none;
                border: none;
                box-shadow: none;
                .border-radius(0px);
            }
            div.btn{
                padding: 10px 0px 9px 20px;
                text-align: left;
                color: #fff;
                cursor: default;
                text-shadow: none;
                padding-right: 5px;
                margin-right: -5px;

                &:hover{cursor: default;}
                &:active{box-shadow: none;}
                div{
                    display: inline-block;
                    vertical-align: middle;
                }
                img.avatar{margin: 0px 0px 0px 20px;}
            }

            button.dropdown-toggle{
                padding: 23px 20px 24px;
                span.caret{
                    border-top-color: #fff;
                }
            }

            /* when dropdown is open */
            &.open{
                border-left: 1px solid #CDCED3;
                border-right: 1px solid #CDCED3;
                .box-sizing-border-box();

                div.btn{
                    background-color: #fff;
                    color: #7a7a7a;
                    strong{color: #2a5db5;}
                }

                button.dropdown-toggle{
                    background-color: #fff;
                    span.caret{border-top-color: #949393;}
                }
            }

            ul.dropdown-menu{
                li{
                    &:last-child{
                        a{color: #ed1c24;}
                    }
                }
            }
        }
    }
}

/* Styles for dropdown menu */
ul.dropdown-menu{
    border: 1px solid #CDCED3;
    color: #000;
    left: auto;
    right: 0;
    margin: 0px -1px 0 -1px;
    width: 100.5%;
    .border-radius(0px);
    .box-sizing-border-box();

    li{
        padding-left: 20px;
        padding-right: 20px;
        &:first-child{padding-top: 15px;}
        &:last-child{padding-bottom: 15px;}
        &.divider{
            margin-left: 20px;
            margin-right: 20px;
        }
        a{
            padding-left: 0px;
            padding-right: 0px;
            &:hover{
                filter: none !important;
                background: none;
                color: #2a5db5 !important;
            }
            i{margin-right: 10px;}
        }
    }
}

div.msg-user{
    color: #7a7a7a;
    text-align: left;
    font-family: @default-font-family;
    font-size: 18px;
    border-top: 1px solid #fff;
    border-left: 1px solid #CDCED3;
    border-right: 1px solid #CDCED3;
    padding: 7px 0 7px 20px;

    #gradient > .vertical(#f1f5fc, #dee2e8);

    h4{
        color: #7a7a7a;
        padding-top: 7px;
        margin: 0px;
        display: inline-block;
        font-size: 18px;
    }
}

form#form-search{
    border: 1px solid #c8c9ce;
    margin: 0px;
    margin-right: 20px;
    padding: 1px;
    display: inline-block;

    div.input-append{
        margin: 0px;
        & > *{
            border: 1px solid #fff;
            .border-radius(0px);
        }
    }

    input[type="text"]{
        box-shadow: none;
        color: #7b7b7b;
    }

    button{padding: 6px 3px 2px 10px;}
}

div.main-content{
    background-color: #fff;
    /*main color*/
    color: #7a7a7a;
    border: 1px solid #CDCED3;
    position: relative;
}

div#left-bar{
    background-color: #f5f6f9;
    border-right: 1px solid #CDCED3;
}

div#panel-content{
    padding: 10px 20px 10px 0px;
    min-height: 723px;

    div.page-header{
        margin: 0px;
        border-bottom: 2px solid #cdced3;
        margin-bottom: 20px;

        h3{ margin: 0px; font-size: 30px; }
    }
}

div.container-group{
    border: 1px solid #cdced3;
    margin-bottom: 20px;
    div.header{
        border-bottom: 1px solid #cdced3;
        padding: 12px 20px;
        position: relative;

        #gradient > .vertical(#f0f4fb, #dee2e8);

        h4{
            margin: 0px;
            padding: 0px;
            font-size: 18px;
            display: inline-block;
            i{margin-top: 2px;}
        }

        div.options{
            border-left: 1px solid #cdced3;
            padding: 13px 20px;
            display: inline-block;
            position: absolute;
            right: 0px;
            top: 0px;
            .box-sizing-border-box();
        }
    }
    div.body{
        position: relative;
    }
}

div.accordion-group{
    margin-bottom: 0px;
    border-style: solid;
    border-width: 1px;
    border-color: #cdced3;
    border-left: none;
    border-top: none;
    border-right: none;
    .border-radius(0px);

    div.accordion-heading{
        border-top: 1px solid #fff;
        padding: 15px 20px;

        #gradient > .vertical(#f1f5fc, #dfe3e8);
        .border-radius(0px);

        a{
            color: #7a7a7a;
            padding: 0px;
            outline: 0 none;
            margin:0px;

            &:hover{
                text-decoration: none;
                span.caret{display: block !important;}
            }

            &:active{
                border: none;
            }

            i{margin-right: 10px;}

            span.caret{
                display: none;
                margin-top: 8px;
                border-left:    6px solid transparent;
                border-right:   6px solid transparent;
                border-top:     6px solid;
                border-bottom:  6px;
            }

            span.caret-in{
                border-bottom-style: solid;
                border-top-style: none;
                display: block;
            }

            div.reminder-count{
                color: #fff;
                font-size: 13px;
                padding: 1px 9px;
                margin-top: -2px;
                border: 1px solid #840101;

                #gradient > .vertical(#c51319, #850101);
            }
        }
    }

    div.accordion-inner{
        background-color: #fff;
        padding: 0px;
        ul{
            margin: 0px;
            li{
                padding: 16px 20px;
                border-top: 1px solid #cdced3;
                a{color: #3f7dcb;}
            }
        }
    }

    ul#reminders{
        background-color: #f5f6f9;

        li{
            position: relative;

            div.icon-continer{
                display: inline-table;
                vertical-align: middle;

                i[class^="panel-icon"]{
                    height: 26px;
                    width: 22px;
                    margin-left: -2px;
                }
            }

            div.item-reminder{
                color: #7a7a7a;
                display: inline-table;
                font-size: 13px;
                text-indent: 0;
                vertical-align: middle;
                padding-left: 5px;
                width: 84%;

                span{color: #ed1c24;}
            }
        }
    }
}

div#usage-bars{
    border-top: 1px solid #cdced3;
    bottom: 0px;
    width: 100%;
    .box-sizing-border-box();

    ul{
        border-top: 1px solid #fff;
        padding-top: 20px;

        li{
            padding: 0px 20px;
            margin-bottom: 15px;
            &:last-child{margin-bottom: 0px;}

            div.label-progress{
                color: #7a7a7a;
                font-size: 12px;
                margin-bottom: 5px;
                line-height: 17px;
            }

            div.progress{
                margin: 0px;
                border: 1px solid #CDCED3;
                height: 10px;
                .border-radius(0px);

                &.bandwidth div.bar{
                    #gradient > .vertical(#4a8dd7, #3167bc);
                }

                &.diskspace div.bar{
                    #gradient > .vertical(#7fbd3d, #278432);
                }

                &.email div.bar{
                    #gradient > .vertical(#e51a22, #b40e12);
                }

                &.database div.bar{
                    #gradient > .vertical(#a25ba3, #812880);
                }
            }
        }
    }
}

footer{
    margin-bottom: 40px;
    color: #7a7a7a; 
    font-size: 13px;
    padding-top: 20px;

    div#footer-links{
        padding-left: 20px;
        ul{
            margin: 0px;
            li{
                float: left;
                &:after{content: "|";}
                &:last-child:after{content: "";}
                &:first-child a{padding-left: 0px;}
                a{
                    color: #7a7a7a;
                    padding-right: 10px;
                    padding-left: 10px;
                    &:hover{
                        color: #2b5eb6;
                        text-decoration: none;
                    }
                }
            }
        }
    }
    p{
        text-align: right;
        padding-right: 20px;
    }
}

/******************* 404 Error Page ****************/
div.msg-404{
    text-align: center;
    font-size: 30px;
    p{
        line-height: 25px;
    }
    .msg-404-error{
        color: #900405;
    }
    .msg-404-number{
        color: #7a7a7a;
        font-weight: bold;
        span{
            font-size: 200px;
            line-height: 170px;
        }
    }
    a{
        color: #838383;
        font-size: 13px;
        border: 1px solid #cdced3;
        padding: 10px 20px;
        margin-top: 30px;
        display: inline-block;
        font-weight: bold;
        .opacity(80);

        #gradient > .vertical(#eff3f9, #dee2e8);

        &:hover{
            text-decoration: none;
            .opacity(100);
        }
    }
}

/************************** ALERT MESSAGES ***********************/
div.alert{
    padding-top: 14px;
    padding-bottom: 14px;
    .border-radius(0);
    
    .close{
        .opacity(80);
        &:hover{
            .opacity(100);
        }
    }
}
div.alert-note{
    border: 1px solid #b7b7bc;
    color: #6d6d6d;

    #gradient > .vertical(#d6dae0, #c6cacf);
}

div.alert-error{
    border: 1px solid #750101;
    color: #fff;

    #gradient > .vertical(#b01116, #760101);
}

div.alert-success{
    border: 1px solid #5a8521;
    color: #fff;

    #gradient > .vertical(#7db038, #5a8521);
}

div.alert-warning{
    border: 1px solid #dc841a;
    color: #fff;

    #gradient > .vertical(#dcb01a, #dc841a);
}

div.alert-info{
    border: 1px solid #2653a2;
    color: #fff;
    #gradient > .vertical(#4f93ce, #2653a2);
}

/****************************************************************/

/* Large desktop */
@media (min-width: 1200px) {}

@media (min-width: 1024px){}

@media (min-width: 980px){}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 980px) {}

@media (max-width: 979px) {}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {}

/* Landscape phones and down */
@media (max-width: 480px) {}

@media (max-width: 320px) {}

/**************** MIXINS ************/
.visible-small-phone{
    display: none;
}